<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <title>协同平台商脉圈运营者管理系统-控制台</title>

    <!--CSS-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">

    <!-- HTML5 shim and Respond.js for IE8 support HTML5 elements and media queries-->
    <!--[if lt IE 9]>
    <script src="js/libs/html5shiv.min.js"></script>
    <script src="js/libs/respond.min.js"></script>
    <![endif]-->
</head>

<body class="overflow-x-h">
<div class="container animated fadeInRight">

    <!--overview-box-->
    <div class="overview-box">
        <div class="col-lg-8 statistics">
            <div class="col-lg-3">
                <div class="item">
                    <img class="icon" src="images/base/notice.png" />
                    <p class="text">
                        <span>公告数量</span>
                        <span class="ellipsis">2121</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="item">
                    <img class="icon" src="images/base/file.png" />
                    <p class="text">
                        <span>文件数量</span>
                        <span class="ellipsis">2121</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="item">
                    <img class="icon" src="images/base/goods.png" />
                    <p class="text">
                        <span>商品数量</span>
                        <span class="ellipsis">2121212</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="item">
                    <img class="icon" src="images/base/project.png" />
                    <p class="text">
                        <span>项目数量</span>
                        <span class="ellipsis">2121221</span>
                    </p>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="member-box">
                <div class="wrap">
                    <p class="headline">商脉圈成员</p>
                    <a href="member-list.html" class="more" target="iframe">更多 <i class="fa fa-angle-right"></i></a>
                    <img class="icon" src="images/base/member.png" />
                    <span class="num">成员人数：2000</span>
                    <label class="filter">
                        商圈成员增长量
                        <select class="select-value">
                            <option value="">近一周</option>
                            <option value="">近一个月</option>
                            <option value="">近半年</option>
                            <option value="">近一年</option>
                        </select>
                    </label>
                </div>
                <div class="chart" id="chart"></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="notice-box">
                <div class="list">
                    <p class="headline">消息提醒</p>
                    <a href="message-list.html" class="more" target="iframe">更多 <i class="fa fa-angle-right"></i></a>
                    <ul class="nav">
                        <li class="item">
                            <a href="member-detail.html" class="txt unread" target="iframe">孟加拉国商旅团火热报名字数太长怎么办怎么办太长怎么办怎么办</a>
                        </li>
                        <li class="item">
                            <a href="member-detail.html" class="txt unread" target="iframe">孟加拉国商旅团火热报名</a>
                        </li>
                        <li class="item">
                            <a href="member-detail.html" class="txt" target="iframe">孟加拉国商旅团火热报名</a>
                        </li>
                        <li class="item">
                            <a href="member-detail.html" class="txt" target="iframe">孟加拉国商旅团火热报名</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

    <!--member-box-->
    <div class="member-wrap">
        <div class="headline">成员画像</div>
        <div class="col-lg-7">
            <div class="chart2" id="chart2"></div>
            <div class="btn-box">
                <button class="btn">成员分布总览</button>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="chart3" id="chart3"></div>
        </div>
        <div class="clearfix"></div>
    </div>

    <!--information-->
    <div class="information">
        <p class="headline">商脉圈信息</p>
        <a href="information-edit.html" class="more" target="iframe">编辑</a>
        <div class="top">
            <div class="col-lg-4">
                <img class="main-img" src="images/base/main-img.jpg" />
            </div>
            <div class="col-lg-8">
                <p>运营者：<img class="opeator-avatar" src="images/base/user.jpg"/> <span>运营者姓名</span></p>
                <p>孟加拉国-植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品-谷物-01</p>
                <p>创建时间：2019-10-11</p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="bottom">
            <p>商脉圈简介：</p>
            <p class="intro">植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品植物产品，汇聚行业内的政府、专家学者、供应商，服务商界人士，整合行业的商品、项目和经济报告等商贸信息。推送孟加拉谷物行业的市场快讯，汇聚行业内的政府、专家学者、供应商，服务商界人士，整合行业的商品、项目和经济报告等商贸信息。推送孟加拉谷物行业的市场快讯，汇聚行业内的政府、专家学者、供应商，服务商界。</p>
        </div>
    </div>
</div>

<script src="js/libs/jquery-1.12.1.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/slimscroll.min.js"></script>
<script src="js/libs/echarts.min.js"></script>
<script src="js/base.js"></script>
<script type="text/javascript">
    $(function(){

        // 商脉圈成员数量增长chart
        var myChart = echarts.init(document.getElementById('chart'));
        var option = {
            color: ['#7f5cb3'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    type:'bar',
                    barWidth: '55%',
                    data:[10, 52, 200, 334, 390, 330, 220,200, 334, 390, 330, 220]
                }
            ]
        };
        myChart.setOption(option);

        // 成员地区分布概览chart
        var myChart2 = echarts.init(document.getElementById('chart2'));
        var option2 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['蒙巴萨','拉脱维亚','天津','金华','杭州','厦门','北京','上海']
            },
            series: [
                {
                    name:'国家',
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'非洲', selected:true},
                        {value:679, name:'南美洲'},
                        {value:1548, name:'亚洲'}
                    ]
                },
                {
                    name:'城市/地区',
                    type:'pie',
                    radius: ['40%', '55%'],
                    label: {
                        normal: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    data:[
                        {value:335, name:'北京'},
                        {value:310, name:'上海'},
                        {value:234, name:'天津'},
                        {value:135, name:'金华'},
                        {value:1048, name:'杭州'},
                        {value:251, name:'厦门'},
                        {value:147, name:'蒙巴萨'},
                        {value:102, name:'拉脱维亚'}
                    ]
                }
            ]
        };
        myChart2.setOption(option2);

        // 成员年龄性别分布概览chart
        var myChart3 = echarts.init(document.getElementById('chart3'));
        var option3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['男', '女']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['18岁以下','18-28','29-39','40-50','51-61','62-72']
            },
            series: [
                {
                    name: '男',
                    type: 'bar',
                    data: [183, 239, 234, 100, 144, 230,288]
                },
                {
                    name: '女',
                    type: 'bar',
                    data: [15, 238, 310, 194, 141, 7,121]
                }
            ]
        };
        myChart3.setOption(option3);
    });
</script>
</body>
</html>